<template>
	<view class="warehouse-detail">
		<u-sticky bgColor="#fff">
			<view class="p-30">
				<u--input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="输入仪器名称，如介质损耗测定仪"
					border="surround" v-model="form.name" @confirm="onFilterName"></u--input>
			</view>
		</u-sticky>
		<view class="p-x-30 m-y-20">
			<view v-for="(item, index) in list" :key="index" class="format-item">
				<view class="format-tip" :class="[item.className]">{{item.statusName}}</view>
				<view class="format-content">
					<view class="name">借用日期：{{item.approverOutDate}}</view>
					<u-line dashed></u-line>
					<view class="detail m-b-20">
						<u-row v-for="(data, i) in item.instrumentsDTOs" :key="i" customStyle="margin-botton: 10rpx">
							<u-col span="8">
								<view class="text-e">{{data.name}}({{data.modelNumber}})</view>
							</u-col>
							<u-col span="4">
								<view class="text-e">{{data.devicePrecision}}</view>
							</u-col>
						</u-row>
					</view>
					<view v-if="item.comment">
						<u-row customStyle="margin: 14rpx;font-size: 24rpx;">
							<u-col span="3">
								<view class="text-e">驳回原因：</view>
							</u-col>
							<u-col span="9">
								<view class="text-e">{{item.comment}}</view>
							</u-col>
						</u-row>
					</view>
					<view>
						<view class="submit-btn">
							<view></view>
							<u-button type="primary" text="去归还" @click="onSubmit(item)"
								:customStyle="{width: '120rpx',height: '60rpx',margin: 0}"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-if="!list.length" marginTop="30rpx" mode="list" icon="/static/null.png">
		</u-empty>
		<u-gap height="100rpx" bgColor="#f6f7f9"></u-gap>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: ''
				},
				list: [],
				allList: []
			}
		},
		onLoad() {
			this.getWarehouseList()
		},
		onBackPress() {
			uni.switchTab({
				url: "/pages/warehouse/warehouse"
			})
			return true
		},
		onUnload() {
			//#ifdef MP-WEIXIN
			wx.reLaunch({
				url: '/pages/warehouse/warehouse'
			})
			//#endif
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getWarehouseList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 跳转到归还详情页面
			onSubmit(data) {
				uni.setStorageSync('loanType', 'back')
				if (data.comment) {
					uni.navigateTo({
						url: `/pages/loan/loan?id=${data.id}&taskId=${data.taskId}&backComment=${data.comment}`
					});
					return
				}
				uni.navigateTo({
					url: `/pages/loan/loan?id=${data.id}&taskId=${data.taskId}`
				});
			},
			// 获取工作流列表
			async getWarehouseList() {
				const res = await this.$api.getBackList()
				let keys = []
				const list = res.data.list.filter(item => {
					if (['入库申请', '外借归还'].includes(item.taskName)) {
						keys.push(item.businessKey)
						return item
					}
				})
				if (keys.length) {
					this.getDetailList(keys, list)
				}
			},
			// 根据工作流列表的businessKey获取页面列表数据
			getDetailList(keys, list) {
				this.$api.getDetails({
					ids: keys.join(',')
				}).then(res => {
					res.data.map(async (item, index) => {
						item = Object.assign(item, list[index])
						let res = await this.$api.getComment({
							processInstanceId: item.processInstanceId
						})
						item.comment = res.data
						if (item.taskName == '入库申请') {
							item.statusName = '待归还'
							item.className = 'bg-f4ad23'
						} else if (item.taskName == '外借归还') {
							item.statusName = '外借中'
							item.className = 'bg-0e64fe'
						}
						if (item.comment) {
							item.statusName = '已驳回'
							item.className = 'bg-f42323'
						}
					})
					this.list = res.data
					this.allList = this.list
				})
			},
			// name搜索条件
			onFilterName(val) {
				if (!val) {
					this.list = this.allList
					return
				}
				this.list = this.allList.filter(item => {
					const names = item.instrumentsDTOs.map(name => name.name)
					if (names.includes(val)) {
						return item
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warehouse-detail {
		.name {
			font-size: 30rpx;
			font-weight: 600;
			color: #333333;
			padding-bottom: 10rpx;
		}

		.detail {
			background: #F7F9FC;
			border-radius: 5rpx;
			padding: 15rpx 20rpx;
			font-size: 24rpx;
			color: #919191;
			margin-top: 10rpx;
		}

		.submit-btn {
			display: flex;
			justify-content: flex-end;
			padding: 0 20rpx 0 0;
		}
	}
</style>